import React from 'react';
import NavBar from '@/components/navbar/navbar';
import { CheckCircleOutline } from 'antd-mobile-icons';
import './pay.scss';
import Price from '@/components/price/price';
import List from '@/components/list';
import Btn from '@/components/button';
import TabBar from '@/components/tabBar';


export interface CashierProps {
    payType?: [{
        icon: string;
        name: string;
        desc: string;
        checked: boolean;
    }];
    otherPay?: [{
        icon: string;
        name: string;
        desc: string;
        checked: boolean;
    }];
}

const defaultProps = {
    payType: [
        {
            icon: '/src/assets/pay/pay_wxpay.png',
            name: '微信支付',
            desc: '推荐使用微信支付',
            checked: true
        },
        {
            icon: '/src/assets/pay/pay_alipay.png',
            name: '支付宝支付',
            desc: '推荐使用支付宝支付',
            checked: false
        }
    ]
}
const Cashier: React.FC<CashierProps> = (props) => {
    const { payType, otherPay, ...rest } =
    {
        ...defaultProps,
        ...props
    };

    const payHandler = () => {
        console.log('支付');
    }

    return (
        <div className='seal-pay-cashier'>
            <div className='seal-head'>
                <NavBar backIcon={true} content={'收银台'}></NavBar>
            </div>

            <div className='seal-body'>
                <div className='seal-pay-cashier-amount'>
                    <div className='seal-pay-cashier-amount-main'>
                        <Price price={6258.25} size='xxlarge'></Price>
                    </div>
                    <div className='seal-pay-cashier-amount-countdown'>
                        <div className='seal-pay-cashier-amount-countdown-label'>
                            支付倒计时
                        </div>
                        <div className='seal-pay-cashier-amount-countdown-time'>
                            00:00:00
                        </div>
                    </div>
                </div>

                <div className='seal-pay-cashier-payType'>
                    <div className='seal-pay-cashier-payType-main'>
                        <List headTitle='支付方式'>
                            {
                                payType.map((item, index) => {
                                    return (
                                        <List.Item key={index} left={
                                            <>
                                                <div className='seal-pay-cashier-payType-icon'>
                                                    <img src={item.icon} />
                                                </div>
                                            </>}>
                                            {item.name}
                                        </List.Item>
                                    )
                                })
                            }
                        </List>
                    </div>

                    <div className='seal-pay-cashier-payType-other'>

                    </div>
                </div>

            </div>

            <div className='seal-footer seal-bottom-fixed'>
                <TabBar>
                    <TabBar.Item>
                        <Btn btnTitle={'确认付款'} onClick={payHandler}></Btn>
                    </TabBar.Item>
                </TabBar>
            </div>


        </div>
    );
};

export default Cashier;